<template>
  <div ref="scrollWrapper" style=" width: 100vw; height: 100vh;overflow: hidden;background: coral;">
    <ul>
      <li v-for="(item, key) in dataArr" :key="key">{{item}}</li>
    </ul>
  </div>
</template>

<script>
/* eslint-disable semi,import/newline-after-import,no-new */

import BScroll from 'better-scroll';// dom
export default {
  name: 'selectArea',
  data() {
    return {
      // dataArr: [1, 23],
      dataArr: [],
    };
  },
  created() {
    this.$bus.$on('area-data', (data) => {
      this.dataArr = data;
    });
  },
  mounted() {
    new BScroll(this.$refs.scrollWrapper, {})
  },
};
</script>

<style>
  ul{
    list-style: none;
  }
  li{
    height: 40px;
    background: coral;
    color: #fff;
    line-height: 40px;
    text-indent: 2em;
    border-top: 1px solid #fff;
  }
</style>
